<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$符号可以接受的四种参数类型</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="box1"></div>
<span>我是span</span>
</body>
<!--
    1. 总结:
        - 可以发现, jquery的$可以接受四种类型的参数:
            1. 函数: 此函数将作为入口函数;
            2. 元素选择字符串: 用来选择页面元素;
                - 返回值: jquery封装的dom元素.
            3. html代码: 用来将String转换为html元素;
                - 返回值: jquery封装的dom元素.
            4. Dom元素: 将Dom元素转换为jquery的对象.
                - 返回值: jquery封装的dom元素.
-->
<script>
    $(function () {
        appendStringHtml();
        useDomIsParam();
    });

    /**
     * 功能:
     *      测试以String作为$函数的入参.
     * 输出:
     *      以html代码为$的参数的返回值: jQuery.fn.init [p]
     * 说明:
     *      1. 其实就是会将传入的String转换为Dom元素.
     */
    function appendStringHtml() {
        const code1 = $("<p>我是一个段落</p>");
        const code2 = $("<p>我是一个段落</p>");
        const code3 = $("<p>我是一个段落</p>");
        // 这是$函数接受选择器类型的String, 会自动选择当前页面的Dom元素.
        console.log("以html代码为$的参数的返回值:", code1);

        $('#box1').append(code1);
        $('#box1').append(code2);
        $('#box1').append(code3);

        // 代码只能被添加一次, 重复添加无效
        $('#box1').append(code1);
    }

    /**
     * 功能:
     *      测试jquery的$函数以Dom元素为参数.
     * 输出:
     *      <span>我是span</span>
     *      jQuery.fn.init [span]
     * 说明:
     *      1. 可以发现, 将Dom元素传入jquery的$函数时, jquery就会将这个Dom元素封装为jquery的对象.
     */
    function useDomIsParam() {
        //获取到的是Dom元素
        const span = document.getElementsByTagName("span")[0];
        // 将Dom元素以参数的形式赋值给$函数
        const $span = $(span);

        console.log(span);
        console.log($span);
    }
</script>
</html>